<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<script>
  var myCan = document.getElementById("myCanvas");
  // 设置画笔
  var ct = myCan.getContext("2d");

  // 插入图片3种方法
  // 1.创建图片对象
  var img=new Image();
  // 2.设置图片路径
  img.src="../../img/5.5/clock.jpg";
  // 3.图片准备完后开始插入
  img.onload=function (ev) {
  // (1).3个参数ct.drawImage(图片对象,放置图片的位置x坐标,放置图片的位置y坐标);
  ct.drawImage(img,0,0);
  // (2).5个参数ct.drawImage(图片对象,放置图片的位置x坐标,放置图片的位置y坐标,图片的宽度w,图片的高度h);
  //   ct.drawImage(img,0,0,600,600);
  // (3).9个参数ct.drawImage(图片对象,截取图片开始位置x坐标,截取图片开始位置y坐标,截取图片的宽w,截取图片的高h,放置图片位置的x坐标,放置图片位置的y坐标,图片的宽w,图片的高h);
  //   ct.drawImage(img,100,50,800,600,50,50,800,600);
  };

  // 4.截取
  // 截取什么样子就绘制什么样子的图形
  ct.arc(300,300,300,0,2*Math.PI,false);
  ct.strstrokeStyle = "orangered";
  ct.lineWidth=5;
  ct.stroke();

  // 5.开始截取
  ct.clip();
</script>
</body>
</html>
